<template>
  
    <nav class="navbar navbar-expand-lg navbar-expand-md navbar-expand-sm navbar-light bg-light" >
      <a class="py-2" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
      </a>

      <a href="/"  class="navbar-brand">点餐系统 </a>
      <a class="nav-link">{{username}}</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
       <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
            <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <router-link tag="div" :to=homeLink class="nav-link">主页</router-link>
          </li>
            <li class="nav-item"><router-link to="menu"  class="nav-link">菜单</router-link></li>
          <li class="nav-item"><router-link to="touchs"  class="nav-link">触屏</router-link></li>
          <li class="nav-item"><router-link :to="{name:'adminLink'}" class="nav-link">管理</router-link></li>
          <li class="nav-item"><router-link to="about" class="nav-link">关于我们</router-link></li>

        </ul>
  
        <ul class="navbar-nav ml-auto">
           <!-- <li class="nav-item"><a class="nav-link">{{userInfo.userAccount}}</a></li> -->
         
          <li class="nav-item"><router-link to="login" class="nav-link"> {{$store.state.userInfo.userAccount?'退出':'登录'}}</router-link></li>
          <li class="nav-item"><router-link to="register" class="nav-link">注册</router-link></li>

        </ul>
  </div>




    </nav>
 

</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      homeLink: "/"
    };
  },
  computed: {
    username() {
      if (this.$store.state.userInfo.userAccount) {
        return "欢迎您," + this.$store.state.userInfo.userAccount;
      } else {
        return "";
      }
    },
    ...mapState({
      userInfo:state=>state.userInfo
    })
  },
  methods: {
    pFun: function() {
      console.log("Header");
    }
  }
};
</script>
<style scoped>
</style>
